<style>
.tabbar{
	width: 95vw;
	height: 100rpx;
	background: #d500ff;
	border: 1px solid #FFFFFF;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	border-radius: 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
	.tabbar .tab{
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		transition: all .2s;
	}
	.tabbar .tab .text{
		margin-top: 4px;
		font-family: 'Montserrat';
		font-style: normal;
		font-weight: 600;
		font-size: 10px;
		line-height: 15px;
		text-align: center;
		letter-spacing: -0.3px;
		
	}
	.tab-box{
		width: 101%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: all .5s;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius: 20rpx;
	}
</style>
<template>
	<view class="tabbar">
		<view  class="tab" v-for="(i,index) in tabbarArr" :key="index" @click="openTo(index)">
			<view class="tab-box" :style="{background:tabbarIndex == index ? '#FFFFFF':''}">
				<image :src="i.img" mode="widthFix" style="width: 17px;"></image>
				<view class="text" :style="{color:tabbarIndex == index ? '#000000':'#ffffff',fontWeight:tabbarIndex == index ? '800' : '300'}">{{i.text}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"tabbar2",
		data() {
			return {
				tabbarIndex:0,
				tabbarArr:[
					{
						img:"/static/Tabbar2/tabbar1.webp",
						h_img:"/static/h-tabbar1.webp",
						text:"HOME"
					},
					{
						img:"/static/Tabbar2/tabbar2.webp",
						h_img:"/static/h-tabbar2.webp",
						text:"HIGHLIGHTS"
					},
					{
						img:"/static/Tabbar2/tabbar3.webp",
						h_img:"/static/h-tabbar3.webp",
						text:"RUMMY RULES"
					},
					{
						img:"/static/Tabbar2/tabbar4.webp",
						h_img:"/static/h-tabbar4.webp",
						text:"MY"
					}
				]
			};
		},
		methods:{
			openTo(dex){
				this.tabbarIndex = dex
			}
		}
	}
</script>

